<template>
  <basic-container height="100%" :id="pageId">
    <div style="height: 100%" v-loading="loading">
      <el-tabs v-model="tabDetailPane" type="border-card">
        <el-tab-pane label="表单" name="actMainForm">
          <start-panel>
            <start-act-main-form ref="startActMainForm" @submit="submit"></start-act-main-form>
          </start-panel>
        </el-tab-pane>
        <el-tab-pane label="正文" v-if="startPropTools.eq(procFunConfig,'zenWenDocumentPanel','true')" name="zenWenDoc">
          <start-office v-model="officeOssId" style="height: 600px" ref="startOffice"></start-office>
        </el-tab-pane>
      </el-tabs>
      <div>
        <el-button @click="$router.closeRouter()">取 消</el-button>
        <el-button @click="$refs.startActMainForm.clear()">清 空</el-button>
        <el-button type="primary" @click="$refs.startActMainForm.submit()">提交</el-button>
      </div>
    </div>
  </basic-container>
</template>
<script>

import StartPanel from "components/start-panel/index.vue";
import useUserStore from "@/stores/useUserStore";
import procMainForm from "@/views/start/activiti/components/actForm/procMainForm.vue";
import BpmnProcTrack from "@/views/start/activiti/components/bpmn/ProcTrack.vue";
import TaskHistory from "@/views/start/activiti/components/task/taskHistory.vue";
import StartOffice from "components/start-components/start-office/index.vue";
import startActApi from "@/api/start/activiti/core/startActApi";
import startActMainForm from "@/views/start/activiti/components/startActMainForm.vue";
import startPropTools from "@/mixins/startPropTools";

export default {
  components: {startActMainForm, StartOffice, TaskHistory, BpmnProcTrack, procMainForm, StartPanel},
  computed: {
    startPropTools() {
      return startPropTools
    },
    pageId() {
      return "pageStartProc_" + Math.random();
    }
  },
  data() {
    return {
      tabDetailPane: 'actMainForm',
      loading: true,
      userId: null,
      modelKey: null,
      procModel: null,
      officeOssId: undefined,
      procFunConfig: {},
    }
  },
  created() {
    this.userId = useUserStore().userId
    let modelKey = this.$route.query.modelKey
    this.modelKey = modelKey;
    this.init(modelKey)
  },

  methods: {
    init() {
      startActApi.getStartProcDefDetail(this.modelKey).then(res => {
        let data = res.data.data

        this.procModel = data;
        this.procFunConfig = data.procFunConfig

        this.$nextTick(() => {
          this.$refs.startActMainForm.init(data.procFormConfig);
          this.loading = false
        })
      })
    },


    submit(formModel, done) {
      let config = {}
      config.confirmButtonText = "确定"
      config.cancelButtonText = "取消"
      config.type = "warning"
      let submitModel = {}
      submitModel.businessFormData = formModel;
      submitModel.officeOssId = this.officeOssId;
      this.$confirm('您确定要提交此申请吗？', config).then(() => {
        return startActApi.startApply(this.modelKey, submitModel)
      }).then(res => {
        this.$message.success("提交成功")
        this.$router.closeRouter()
      }).finally(() => {
        if (done) {
          done()
        }
      })
    },


  }
}

</script>
<style scoped>

</style>
